//立即执行函数 柱状图-就业行业
(function () {
    // 实例化一个对象
    var myChart = echarts.init(document.querySelector(".bar .chart"))
    // 指定配置和数据
    let option = {
        color: ["#2f89cf"],//配置图标柱形颜色
        tooltip: {
            trigger: "axis",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {//配置图表大小
            left: "0%",
            right: "0%",
            bottom: "4%",
            top: "10px",
            containLabel: true
        },
        // x轴相关设置
        xAxis: [
            {
                type: "category",
                data: [
                    "旅游行业",
                    "教育培训",
                    "游戏行业",
                    "医疗行业",
                    "电商行业",
                    "社交行业",
                    "金融行业"
                ],
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {//设置x轴的文字颜色和大小
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: "12"
                    }
                },
                //设置x轴样式不显示
                axisLine: {
                    show: false
                }
            }
        ],
        yAxis: [
            {
                type: "value",
                axisLabel: {//设置y轴的文字颜色和大小
                    color: "rgba(255,255,255,0.6)",
                    fontSize: "12"
                },
                // Y 轴线条样式 更改为  1像素的  rgba(255,255,255,.1) 边框
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,1)"
                    }
                },
                // 分隔线的颜色修饰为  1像素的  rgba(255,255,255,.1)   
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,1)"
                    }
                }


            }
        ],
        series: [
            {
                name: "直接访问",
                type: "bar",
                barWidth: "60%",
                data: [200, 300, 300, 900, 1500, 1200, 600],
                itemStyle: {
                    //修改柱子圆角
                    barBorderRadius: 5
                }
            }
        ]
    };
    //   把配置给实例对象
    myChart.setOption(option)
    //   让图表跟随屏幕自适应
    window.addEventListener("resize", function () {
        myChart.resize();
    });

})();
//   柱状图-技能掌握
(function () {
    var myCart = echarts.init(document.querySelector(".barTwo .chart"))
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"]
    var option = {
        grid: {
            left: '22%',
            bottom: '10%',
            top: "10%",
        },
        xAxis: {
            //不显示y轴线条
            show: false
        },
        yAxis: [{
            show: true,
            inverse: true,
            data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
            // 不显示y轴线条
            axisLine: {
                show: false
            },
            //不显示刻度
            axisTick: {
                show: false
            },
            axisLabel: {
                color: "#fff"
            }

        },
        {
            show: true,
            inverse: true,
            data: [702, 350, 610, 793, 664],
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color: "#fff"
                }
            }
        }

        ],
        series: [
            {
                name: '条',
                barCategoryGap: 50,
                barWidth: 10,
                yAxisIndex: 0,
                //显示柱子内文字
                label: {
                    show: true,
                    position: "inside",
                    // {c}会自动解析成数据
                    formatter: "{c}%"
                },
                type: 'bar',
                // 声明颜色数组
                itemStyle: {
                    normal: {
                        barBorderRadius: 20,
                        color: function (params) {
                            console.log(params);
                            return myColor[params.dataIndex]
                        }
                    }
                },
                data: [70, 34, 60, 78, 69]
            },
            {
                name: "框",
                type: "bar",
                barCategoryGap: 50,
                barWidth: 15,
                yAxisIndex: 1,
                data: [100, 100, 100, 100, 100],
                itemStyle: {
                    color: "none",
                    borderColor: "#00c1de",
                    borderWidth: 3,
                    barBorderRadius: 15
                }
            }
        ]
    };
    //   把配置给实例对象
    myCart.setOption(option)
    window.addEventListener('resize', function () {
        myCart.resize()
    })
})();
//折线图-人员变化
(function () {
    // 新增需求 2021-2020年的数据变化
    var yearData = [
        {
            year: '2020',  // 年份
            data: [  // 两个数组是因为有两条线
                [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
            ]
        },
        {
            year: '2021',  // 年份
            data: [  // 两个数组是因为有两条线
                [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
                [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
            ]
        }
    ];

    let myChart = echarts.init(document.querySelector('.line .chart'))
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['新增粉丝', '新增游客'],
            textStyle: {
                color: "#4c9bfd",//图例文字颜色
            },
            right: "10%",//距离右边10%
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: "20%",
            containLabel: true,//包含刻度文字在内
            show: true,//显示边框
            borderColor: "#012f4a"
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,//去除轴内间距
            axisTick: {
                show: false//去除刻度线
            },
            axisLabel: {
                color: "#4c9bfd",//x轴文本颜色
            },
            axisLine: {
                show: false//去除轴线
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false,//去除刻度
            },
            axisLabel: {
                color: "#4c9bfd"
            },
            splitLine: {
                lineStyle: {
                    color: "#012f4a"
                }
            }
        },
        color: ['#00f2f1', '#ed3f35'],//俩条折线分别颜色
        series: [
            {
                name: '新增粉丝',
                type: 'line',
                data: yearData[0].data[0],
                smooth: true,//折线修饰为圆滑
            },
            {
                name: '新增游客',
                type: 'line',
                data: yearData[1].data[1],
                smooth: true,//折线修饰为圆滑
            },
        ]
    };
    // 配置实例
    myChart.setOption(option)
    //让图表跟屏幕自适应
    window.addEventListener("resize", function () {
        myChart.resize()
    })
    $(".line h2").on("click", "a", function () {
        // console.log($(this).index());
        let obj = yearData[$(this).index()]
        console.log(obj);
        option.series[0].data = obj.data[0]
        option.series[1].data = obj.data[1]
        // 重新配置实例
        myChart.setOption(option)


    })

})();

//折线图-播放量模块操作
(function () {
    // 实例化一个对象
    let myChart = echarts.init(document.querySelector('.wordplayer .chart'))
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['转发量', '播放量'],
            top: "0%",
            textStyle: {
                color: "rgba(255,255,255,0.5)",
                fontSize: "12"
            }
        },
        grid: {
            left: '10%',
            top: "30%",
            right: '10%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                // x轴更换数据
                data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"],
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,0.6)",
                        fontSize: "12"
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,0.2)"
                    }
                }
            },
        ],
        yAxis: [
            {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,0.2)"
                    }
                },
                axisTick: {
                    show: false//去除刻度线
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,0.6)",
                        fontSize: "12"
                    }
                },
                splitLine: {//分割线颜色
                    lineStyle: {
                        color: "rgba(255,255,255,0.1)"
                    }
                }
            }
        ],
        series: [
            {
                name: '转发量',
                type: 'line',

                areaStyle: {
                    //渐变色
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
                            },
                            {
                                offset: 0.8,
                                color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
                            }
                        ],
                        false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)"
                },
                emphasis: {
                    focus: 'series'
                },
                smooth: true,//折线修饰为圆滑
                lineStyle: {//单独修改线的样式
                    color: "#0184d5",
                    width: 2
                },
                // 设置拐点
                symbol: "circle",
                // 拐点大小
                symbolSize: 4,
                // 设置拐点颜色以及边框
                itemStyle: {
                    color: "#0184d5",
                    borderColor: "rgba(221,220,107,0.1)",
                    borderWidth: 12
                },
                //开始不显示拐点,鼠标经过显示
                showSymbol: false,
                data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40],
            },
            {
                name: '播放量',
                type: 'line',
                smooth: true,
                lineStyle: {
                    normal: {
                        color: "#00d887",
                        width: 2
                    }
                },
                areaStyle: {
                    // 渐变色，只需要复制即可
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
                            },
                            {
                                offset: 0.8,
                                color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
                            }
                        ],
                        false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)"
                },
                symbol: "circle",//设置拐点,小圆点
                symbolSize: 2,
                // 设置拐点颜色以及边框
                itemStyle: {
                    color: "#0184d5",
                    borderColor: "rgba(221,220,107,0.1)",
                    borderWidth: 12,
                },
                // 开始不显示拐点,鼠标经过显示
                showSymbol: false,
                emphasis: {
                    focus: 'series'
                },
                // series  第二个对象data数据
                data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20],

            },
        ]
    };
    // 配置一个对象
    myChart.setOption(option)
    //让图表跟随着屏幕变化
    window.addEventListener("resize", function () {
        myChart.resize()
    })

})();

//饼形图-年龄分布
(function () {
    let myChart = echarts.init(document.querySelector(".pie .chart"))
    let option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            //距离底部为0%
            bottom: '0%',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: "rgba(255,255,255,0.5",
                fontSize: 12
            }
        },
        series: [
            {
                name: '年龄发布',
                type: 'pie',
                //设置饼图在容器中的位置
                center: ['50%', '50%'],
                //修改内圆半径和外圆半径百分比是相对于容器宽度来说的
                radius: ['40%', '60%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '12',
                        fontWeight: 'bold'
                    }
                },
                // 不显示连接线
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1, name: '0岁以下' },
                    { value: 4, name: '20-29岁' },
                    { value: 2, name: '30-39岁' },
                    { value: 2, name: '40-49岁' },
                    { value: 1, name: '50岁以上' }
                ],
                color: [
                    "#065aab",
                    "#066eab",
                    "#0682ab",
                    "#0696ab",
                    "#06a0ab",
                ],
            }
        ]
    };
    // 配置一个实例
    myChart.setOption(option)
    //使图表跟随屏幕的变化而变化
    window.addEventListener("resize", function () {
        myChart.resize()
    })
})();


//饼形图-地区分布
(function () {
    let myChart = echarts.init(document.querySelector(".address .chart"))
    let option = {
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
        // 修改饼形图大小
        radius:['10%','70%'],
        roseType:"radius",
        legend: {
            itemWidth:8,
            itemHeight:8,
            bottom: '0%',
            textStyle: {
                color: 'rgba(255,255,255,0.6)',
                fontSize: 12
            }
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {   
                name: '面积模式',
                type: 'pie',
                radius: [10, 50],
                center: ['50%', '50%'],
                roseType: 'radius',
                // 文本标签控制饼形图相关样式是一个对象
                label:{
                    fontSize:10
                },
                // itemStyle: {
                //     // borderRadius: 8,
                //     fontSize:12
                // },
                data: [
                    { value: 20, name: '云南' },
                    { value: 26, name: '北京' },
                    { value: 24, name: '山东' },
                    {value: 25, name: '河北'},
                    {value: 20, name: '江苏'},
                    {value: 25, name: '浙江'},
                    {value: 30, name: '四川'},
                    {value: 42, name: '湖北'}
                ]
            }
        ]
    };
    // 配置一个实例
    myChart.setOption(option)
    // 使图表随着屏幕的变化而发生变化
    window.addEventListener("resize", function () {
        myChart.resize()
    })
})()








